<template>
  <div class="pinglun">
    <!-- 返回、搜索部分 -->
    <div class="header">
      <backTitle></backTitle>
      <div class="van-ellipsis">评论({{total}})</div>
    </div>

    <!-- 精彩评论 -->
    <div class="hotcomments">
      <span class="hot-title">精彩评论</span>
      <template v-for="(item, index) in hotcomments">
        <div class="hotcomment">
          <div class="hotcomment-top">
            <div class="touxiang-img">
              <span class="touxiang">
                <img :src="item.user.avatarUrl" alt />
              </span>
              <span class="nickname">{{item.user.nickname}}</span>
            </div>
            <div class="dianzan" :data-num="index">
              <span @click="clickdianzan(index,item.commentId)">{{item.likedCount}}</span>
              <span>
                <van-icon name="good-job-o" />
              </span>
            </div>
          </div>
          <div class="van-multi-ellipsis--l3 comment">{{item.content}}</div>
        </div>
      </template>
    </div>

    <!-- 最新评论 -->
    <div class="newcomments">
      <span class="new-title">最新评论</span>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <template v-for="(item, index) in bufengnewcomments">
          <div class="newcomment">
            <div class="newcomment-top">
              <div class="newcomment-touxiang-img">
                <span class="newcomment-touxiang">
                  <img :src="item.user.avatarUrl" alt />
                </span>
                <span class="nickname">{{item.user.nickname}}</span>
              </div>
              <div class="dianzan" :data-num="index">
                <span @click="clicknewdianzan(index)">{{item.likedCount}}</span>
                <span>
                  <van-icon name="good-job-o" />
                </span>
              </div>
            </div>
            <div class="newcomment-comment">{{item.content}}</div>
          </div>
        </template>
      </van-list>
    </div>

    <!-- 发送评论 -->
    <div class="sendpinglun">
      <van-field v-model="sms" center clearable placeholder="你想说什么" :autofocus="isautofocus">
        <van-button slot="button" size="small" type="primary" @click="sendcomment">发送</van-button>
      </van-field>
    </div>
  </div>
</template>

<script>
import backTitle from "../../components/back";
import send from "../../navshow";

export default {
  data() {
    return {
      total: "0", //总评论数
      hotcomments: "", //热评
      newcomments: "", //最新评论
      bufengnewcomments: "", //部分新评
      dianzanshow: true, //点赞
      loading: false, //加载状态
      finished: false, //是否加载完成
      sms: "", //输入框内容
      isautofocus: true, //自动聚焦
      likedCount: "0",
    };
  },
  created() {
    // 隐藏导航栏
    send.$emit("tab-show", false);

    // 显示播放器
    this.$store.commit("showplayer", false);

    const url =
      "http://120.26.184.71:4000/comment/music?id=" +
      this.$route.query.id +
      "&limit=100";
    this.axios.get(url).then(res => {
      this.total = res.data.total; //总评论数
      this.hotcomments = res.data.hotComments; //热评
      this.newcomments = res.data.comments; //最新评论
      this.bufengnewcomments = this.newcomments.slice(0, 20);
    });
  },
  methods: {
    // 点赞
    clickdianzan(index, commentid) {
      var lists = $(".hotcomments .dianzan");
      for (let i = 0; i < lists.length; i++) {
        if (lists[i].dataset.num == index) {
          lists[i].classList.add("active");
        } 
      }
    },

    // 新评论点赞
    clicknewdianzan(index) {
      var lists = $(".newcomments .dianzan");
      for (let i = 0; i < lists.length; i++) {
        if (lists[i].dataset.num == index) {
          lists[i].classList.add("active");
        }
      }
    },

    // 发送评论
    sendcomment() {
      if (this.sms != "") {
        let url =
          "http://120.26.184.71:4000/comment?t=1&type=0&id=" +
          this.$route.query.id +
          "&content=" +
          this.sms;
        this.axios({
          url,
          withCredentials: true //关键
        }).then(res => {
          if (res.status == 200) {
            this.sms='';
            this.$toast("发送成功");
            var date = new Date();
            const commenturl =
              "http://120.26.184.71:4000/comment/music?id=" +
              this.$route.query.id +
              "&limit=100" +
              "&timestamp=" +
              date.getTime();
            this.axios.get(commenturl).then(res => {
              this.total = res.data.total; //总评论数
              this.newcomments = res.data.comments; //最新评论
              this.bufengnewcomments = this.newcomments.slice(0, 20);
            });
          }
        });
      }
    },

    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.bufengnewcomments.push(
            this.newcomments[this.bufengnewcomments.length + 1]
          );
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.bufengnewcomments.length >= 90) {
          this.finished = true;
        }
      }, 1000);
    }
  },
  components: {
    // 注册一个局部组件
    backTitle
  },
  computed: {
    // 监听时间戳的变化
    watchtimestamp() {
      return this.$store.state.timestamp;
    }
  }
};
</script>

<style scope>
.pinglun {
  display: flex;
  flex-direction: column;
  margin-left: 15px;
}

/* 返回搜索部分 */
.pinglun .header {
  display: flex;
  width: 100vw;
  height: 70px;
  align-items: center;
  background-color: #222831;
  color: white;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 666;
  border-bottom: 1px lightgray solid;
}

.pinglun .header i {
  font-size: 26px;
}

/* 精彩评论 */
.pinglun .hotcomments {
  margin-top: 80px;
}

.pinglun .hot-title {
  display: block;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
}

.pinglun .hotcomment {
  width: 90vw;
  margin-right: 15px;
  margin-bottom: 10px;
}

.pinglun .hotcomment-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.pinglun .touxiang img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.pinglun .active i {
  color: red;
}

.pinglun .comment {
  margin-left: 50px;
  font-size: 14px;
  width: 78vw;
  color: #222831;
}

/* 最新评论 */
.pinglun .newcomments {
  width: 90vw;
  margin-right: 15px;
  margin-bottom: 50px;
}

.pinglun .new-title {
  display: block;
  font-weight: bold;
  font-size: 18px;
  margin-top: 15px;
  margin-bottom: 10px;
}

.pinglun .newcomment-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.pinglun .newcomment-touxiang img {
  width: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.pinglun .newcomment-comment {
  margin-left: 50px;
  font-size: 14px;
  width: 78vw;
  margin-bottom: 10px;
}

.pinglun .nickname {
  padding-top: 5px;
  color: #555555;
}

.pinglun .dianzan i {
  font-size: 16px;
}

.pinglun .sendpinglun {
  position: fixed;
  bottom: 0;
  width: 98vw;
  height: 50px;
  border-top: 1px solid #dbdbdd;
}
</style>